
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table {
            border: 1px solid gray;
            margin: 20px auto 60px;
            width: 700px;
        }

        td {
            border: 1px solid gray;
            text-align: center;
            font-size: 19px;
        }

        th {
            border: 1px solid gray;
        }

        form {
            text-align: center;
        }

        span {
            display: block;
            font-weight: bold;
            margin-bottom: 25px;
        }

        .left, .right, .sex {
            display: inline-block;
            font-size: 19px;
        }

        .left {
            width: 60px;
            font-size: 19px;
        }

        .first, .second, .third, .fourth, .foot {
            margin-bottom: 8px;
        }

        label {
            font-weight: bold;
        }

        input {
            border: 1px solid black;
            border-radius: 5px;
        }

        .body {
            margin: 0px auto;
        }
    </style>
    <script>
        function doAdd(){
            // 获取文本框的值
            var name=document.querySelector("#name").value;
            var age=document.querySelector("#age").value;
            var email=document.querySelector("#email").value;

            //获取单选按钮的DOM对象
            var maleDom=document.querySelector("#male");
            var femaleDom=document.querySelector("#female");
            var sex=maleDom.checked?maleDom.value:femaleDom.value;

            //创建tr元素
            var tr=document.createElement("tr");
            var arrs=[name,age,sex,email,"<input type='button' value='删除' onclick='doDelete(this)'>"];
            //循环创建td元素
            for(var i=0;i<5;i++){
                var td=document.createElement("td");
                td.innerHTML=arrs[i];
                tr.appendChild(td);
            }
            var tb=document.querySelector("tbody");
            tb.appendChild(tr);

        }
        function doDelete(obj){
            obj.parentNode.parentNode.remove();
        }
    </script>
</head>
<body>
<div class="container">
    <div class="top">
        <table>
           <thead>
               <tr>
                   <th>Name</th>
                   <th>Age</th>
                   <th>Gender</th>
                   <th>Email</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>mike</td>
                   <td>20</td>
                   <td>男</td>
                   <td>222@qq.com</td>
                   <td><input type="button" value="删除" onclick='doDelete(this)'></td>
               </tr>
               <tr>
                   <td>mike2</td>
                   <td>20</td>
                   <td>男</td>
                   <td>222@qq.com</td>
                   <td><input type="button" value="删除" onclick='doDelete(this)'></td>
               </tr>
           </tbody>
        </table>
    </div>
    <div class="body">
        <form>
            <span>PIS input Info</span>
            <div class="first">
                <div class="left">Name:</div>
                <input type="text" class="right" id="name">
            </div>
            <div class="second">
                <div class="left">Age:</div>
                <input type="text" class="right" id="age">
            </div>
            <div class="third">
                <div class="sex">Gender:</div>
                <input type="radio" name="sex" id="male" value="男" checked><label for="male">男</label>
                <input type="radio" name="sex" id="female" value="女"><label for="female">女</label>
            </div>
            <div class="fourth">
                <div class="left">Email:</div>
                <input type="text" class="right" id="email">
            </div>
            <div class="foot">
                <input type="button" value="添加" style="width:50px;height: 25px" onclick="doAdd()">
                <input type="reset" value="重置" style="width:50px;height: 25px">
            </div>
        </form>
    </div>
</div>
</body>
</html>